<template>
	<view class="page">
		<page-head :title="title"></page-head>
		<view class="uni-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in list" :key="key">
				<view class="uni-media-list">
					<view class="uni-media-list-logo">
						<image v-if="showImg" :src="value.img"></image>
					</view>
					<view class="uni-flex uni-column" style="flex: 1;justify-content: space-between;">
						<view class="text" style="height: 50upx;text-align: left">
							{{value.productName}}
						</view>
						<view class="uni-flex uni-row">
							<view class="text" style="flex: 1;">小代:{{value.price1}}</view>
							<view class="text" style="flex: 1;">大代:{{value.price2}}</view>
							<view class="text" style=" color:#FF3333; flex: 1;">零售:{{value.price3}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				title: 'media-list',
				showImg: false,
				list: [{
						productName: '爆水珠手膜',
						price1: '12',
						price2: '10',
						price3: '18'
					},
					{
						productName: '八韵草防晒',
						price1: '49',
						price2: '40',
						price3: '69'
					},
					{
						productName: '标婷',
						price1: '12',
						price2: '10',
						price3: '16'
					},
					{
						productName: '优享防晒',
						price1: '43',
						price2: '38',
						price3: '58'
					},
					{
						productName: '思蓓苏熙护颈套盒',
						price1: '599',
						price2: '599',
						price3: '899'
					}
				]
			}
		},
		onLoad() {
			setTimeout(() => {
				this.showImg = true;
			}, 400)
		}
	}
</script>

<style>
	.title {
		padding: 20upx;
	}

	.uni-media-list-text-top {
		line-height: 36upx;
		font-size: 30upx;
		margin-left: 20upx;
	}

	.flex-item {
		width: 33.3%;
		height: 36upx;
		text-align: center;
		line-height: 36upx;
	}
</style>
